<!DOCTYPE HTML>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>相对定位与绝对定位</title>
  <style type="text/css">
    body {
      width: 960px;
      margin: 0 auto;
      font-family: 微软雅黑； font-size: 18px;
      line-height: 1.8em;
    }

    div {
      width: 300px;
      float: left;
    }

    .relative {
      position: relative;
      bottom: 150px;
    }

    .absolute {
      position: absolute;
      bottom: 150px;
    }

    .bg {
      background-color: rgba(255, 204, 204, 0.7)
    }

  </style>
</head>

<body>
  <div>
    <h2>正常信息流</h2>
    <p>孩子，你真是快活啊，一早晨坐在泥土里，耍着折下来的小树枝。</p>
    <p>我微笑着看你在那里耍着那根折下来的小树枝。</p>
    <p class="bg">我正忙着算账，一小时一小时在那里加叠数字。</p>
    <p>也许你在看我，想到：“这种好没趣的游戏，竟把你的一早晨的好时间浪费掉了！"</p>
    <p>孩子，我忘了聚精会神玩耍树枝与泥饼的方法了。</p>
  </div>
  <div>
    <h2>相对定位</h2>
    <p>孩子，你真是快活啊，一早晨坐在泥土里，耍着折下来的小树枝。</p>
    <p>我微笑着看你在那里耍着那根折下来的小树枝。</p>
    <p class="bg relative">我正忙着算账，一小时一小时在那里加叠数字。</p>
    <p>也许你在看我，想到：“这种好没趣的游戏，竟把你的一早晨的好时间浪费掉了！"</p>
    <p>孩子，我忘了聚精会神玩耍树枝与泥饼的方法了。</p>
    <code>.relative { position: relative; top:150px;}</code>
  </div>
  <div>
    <h2>绝对定位</h2>
    <p>孩子，你真是快活啊，一早晨坐在泥土里，耍着折下来的小树枝。</p>
    <p>我微笑着看你在那里耍着那根折下来的小树枝。</p>
    <p class="bg absolute">我正忙着算账，一小时一小时在那里加叠数字。</p>
    <p>也许你在看我，想到：“这种好没趣的游戏，竟把你的一早晨的好时间浪费掉了！"</p>
    <p>孩子，我忘了聚精会神玩耍树枝与泥饼的方法了。</p>
    <code>.absolute {
        position: absolute;
        top:150px;}
      </code>
  </div>
</body>

</html>
